<template>
    <view class="container">
        <view class="userinfo">
            <!-- 未登录状态 -->
            <view class='head-wrap' v-if="!token">
                <view class="no-login-avatar">
                    <view class='no-avatar'>
                        <image class='avatar' src="/static/images/icon/default_avatar_big.png"></image>
                    </view>
                    <view class='btn-login' @click="$store.dispatch('user/wxLoginAction')">点我登录</view>
                </view>
            </view>
            <!-- 登录状态 -->
            <!-- 点击跳转到资料设置界面-->
            <view class='head-wrap' @click="goUrl('/pkgUser/setting/setting',true)" v-else>
                <view class="head-l">
                    <view class='l'>
                        <image class='avatar' :src="userInfo.avatar"></image>
                    </view>
                    <view class='r'>
                        <view class='t'>
                            <view class='name'>{{userInfo.nickname}}</view>
                        </view>
                    </view>
                </view>
                <view class="head-r">
                    <view class="arrow"></view>
                </view>
            </view>
        </view>
        <view class="order-container">
            <view class='header'>
                <view class='top-title'>
                    <view class='left-line'></view>
                    <view class='text'>我的订单</view>
                </view>
                <view class='see-more'>
                    <view class="text">查看全部订单</view>
                    <view class="arrow"></view>
                </view>
            </view>
            <view class='btn-container'>
                <!-- 点击跳转到订单界面-->
                <view class='icon-wrap' @click="goUrl('/pkgOrder/orderList/orderList',true)">
                    <view class='order-icon-wrap'>
                        <image class='order-icon' src='/static/images/icon/icon-pay-r.png'>
                        </image>
                        <view class='blue-point' v-if="token">{{orderInfo.toPay}}</view>
                    </view>
                    <text class='order-txt'>待付款</text>
                </view>
                <view class='icon-wrap' @click="goUrl('/pkgOrder/orderList/orderList',true)">
                    <view class='order-icon-wrap'>
                        <image class='order-icon' src='/static/images/icon/icon-delivery-r.png'>
                        </image>
                        <view class='blue-point' v-if="token">{{orderInfo.toDelivery}}</view>
                    </view>
                    <text class='order-txt'>待发货</text>
                </view>
                <view class='icon-wrap' @click="goUrl('/pkgOrder/orderList/orderList',true)">
                    <view class='order-icon-wrap'>
                        <image class='order-icon' src='/static/images/icon/icon-onroad-r.png'>
                        </image>
                        <view class='blue-point' v-if="token">{{orderInfo.toReceive}}</view>
                    </view>
                    <text class='order-txt'>待收货</text>
                </view>
            </view>
        </view>
        <view class="li-wrap">
            <!-- 点击跳转地址管理-->
            <view class="list" @click="goUrl('/pkgUser/addressList/addressList',true)">
                <view class="list-l">
                    <view class="icon">
                        <image class="img" src="/static/images/icon/icon-address-r.png"></image>
                    </view>
                    <view class="text">地址管理</view>
                </view>
                <view class="arrow"></view>
            </view>
        </view>
        <view class="li-wrap">
            <!-- 点击我的足迹界面-->
            <view class="list" @click="goUrl('/pkgUser/foot/foot',true)">
                <view class="list-l">
                    <view class="icon">
                        <image class="img" src="/static/images/icon/icon-footprint-r.png"></image>
                    </view>
                    <view class="text">我的足迹</view>
                </view>
                <view class="arrow"></view>
            </view>
            <!-- open-type="contact"  打开客服对话框-->
            <button class="contact-btn" open-type="contact">
                <view class="list-l">
                    <view class="icon">
                        <image class="img" src="/static/images/icon/icon-service-r.png"></image>
                    </view>
                    <view class="text">联系客服</view>
                </view>
                <view class="arrow"></view>
            </button>
            <!-- 点击跳转关于我们-->
            <view class="list" @click="goUrl('/pkgUser/about/about',true)">
                <view class="list-l">
                    <view class="icon">
                        <image class="img" src="/static/images/icon/icon-about-r.png"></image>
                    </view>
                    <view class="text">关于我们</view>
                </view>
                <view class="arrow"></view>
            </view>
            <!-- 立即退出-->
            <view class="list" v-if="token">
                <u-button type="primary" @click="quitOut()">立即退出</u-button>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import setBadge from '@/mixins/setBadge.js'
    export default {
        mixins: [setBadge],
        data() {
            return {
                orderInfo: {} //(角标数字)订单信息
            }
        },
        computed: {
            ...mapState('user', ['token', 'userInfo'])
        },
        //页面打开时触发
        onShow() {
            //发请求，获取角标信息
            if (this.token) {
                this.getOrderCount()
            }
        },
        methods: {
            ...mapMutations('user', ['setToken', 'setUserInfo']),
            //1.获取订单统计信息(数字角标信息)
            async getOrderCount() {
                const res = await uni.$http.get('/order/orderCount')
                // console.log(res);
                this.orderInfo = res
            },
            //2.退出登录
            async quitOut() {
                //弹框提示
                const res = await uni.showModal({
                    title: '提示',
                    content: '退出将会清除相关用户资料的哦！'
                })
                // console.log(res);
                //如果点击了取消，就什么都不操作 cancel:true
                if (res.cancel) return
                //走到这里,说明点击了确定，就清空token，清空用户信息
                // 清除token
                // this.$store.commit('user/setToken', '')
                // 清除用户资料
                // this.$store.commit('user/setUserInfo', {})
                this.setToken('')
                this.setUserInfo({})

                //清空购物车信息
                this.$store.commit('cart/setCartData', {
                    cartList: [], //购物车列表信息
                    cartTotal: {} //购物车的统计信息
                })
                //清除角标
                uni.removeTabBarBadge({
                    index: 2
                })



            }
        }
    }
</script>

<style lang="scss">
    page {
        min-height: 100%;
        background-color: #fafafa;
    }

    .container {
        min-height: 100%;
        /* align-items: stretch; */
        overflow-x: hidden;
    }

    .black-mask {
        width: 100%;
        height: 2000rpx;
        position: fixed;
        top: 0;
        left: 0;
        background: #333;
        opacity: 0.5;
        z-index: 99;
    }

    .contact-btn {
        background: #fff;
        border-radius: 0;
    }

    .contact-btn:after {
        border: none;
    }

    .mask {
        width: 100%;
        height: 1000rpx;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
    }

    .btn-login {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        color: #fff;
    }

    .userinfo {
        display: flex;
        width: 100%;
        margin-bottom: 24rpx;
        box-sizing: border-box;
        position: relative;
        background: #fff;
        flex-direction: column;
    }

    .head-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 100rpx 30rpx 30rpx;
        box-sizing: border-box;
        /* border-bottom: 1rpx solid #f1f1f1; */
        background-color: #429fff;
    }

    .head-wrap .no-login-avatar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .head-wrap .no-login-avatar .no-avatar {
        width: 128rpx;
        height: 128rpx;
        position: relative;
        margin-right: 20rpx;
    }

    .head-wrap .no-login-avatar .no-avatar .avatar {
        width: 128rpx;
        height: 128rpx;
        border-radius: 90rpx;
    }

    .head-wrap .head-l {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .head-wrap .head-l .l {
        width: 110rpx;
        height: 110rpx;
        position: relative;
        margin-right: 20rpx;
    }

    .head-wrap .head-l .l .avatar-wrap {
        width: 110rpx;
        height: 110rpx;
    }

    .head-wrap .head-l .l .avatar {
        width: 110rpx;
        height: 110rpx;
        border-radius: 90rpx;
    }

    .head-wrap .head-l .l .crown {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        width: 30rpx;
        height: 30rpx;
        transform: rotate(45deg);
    }

    .head-wrap .head-l .l .crown .icon {
        width: 30rpx;
        height: 30rpx;
    }

    .head-wrap .head-l .r {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .head-wrap .head-l .r .name {
        font-size: 34rpx;
        color: #fff;
        font-weight: 500;
        margin-right: 10rpx;
    }

    .head-wrap .head-r .arrow {
        width: 10rpx;
        height: 10rpx;
        border-top: 4rpx solid #fff;
        border-right: 4rpx solid #fff;
        transform: rotate(45deg);
    }

    .order-container {
        width: 100%;
        background: #fff;
        height: auto;
        margin-bottom: 24rpx;
    }

    .order-container .header {
        height: 90rpx;
        margin: 0 30rpx;
        font-size: 30rpx;
        color: #333;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .top-title {
        width: 200rpx;
        height: 90rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .top-title .left-line {
        width: 6rpx;
        height: 20rpx;
        margin-right: 20rpx;
        background: #429fff;
    }

    .see-more {
        /* width: 200rpx; */
        height: 90rpx;
        font-size: 28rpx;
        color: #999;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .see-more .text {
        margin-right: 20rpx;
    }

    .see-more .arrow {
        width: 10rpx;
        height: 10rpx;
        border-top: 4rpx solid #ccc;
        border-right: 4rpx solid #ccc;
        transform: rotate(45deg);
    }

    .btn-container {
        padding: 30rpx 24rpx;
        display: flex;
        justify-content: space-between;
    }

    .icon-wrap {
        width: 29%;
        /* height: 110rpx; */
        text-align: center;
        display: inline-block;
    }

    .order-icon-wrap {
        position: relative;
    }

    .order-icon {
        width: 60rpx;
        height: 60rpx;
        margin: 0 auto;
        /* margin-top:10rpx;  */
        position: relative;
    }

    .blue-point {
        position: absolute;
        top: -10rpx;
        right: 56rpx;
        border-radius: 20rpx;
        background: #429fff;
        font-size: 20rpx;
        color: #fff;
        padding: 2rpx 12rpx;
    }

    .order-txt {
        font-size: 26rpx;
        color: #666;
    }


    .li-wrap {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        background: #fff;
        flex-direction: column;
        padding-left: 30rpx;
    }

    .li-wrap .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #f1f1f1;
        padding-right: 30rpx;
    }

    .li-wrap .list:last-child {
        border-bottom: none;
    }

    .li-wrap .list .list-l {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .li-wrap .list .list-l .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
        /* background: #f1f1f1; */
    }

    .li-wrap .list .list-l .icon .img {
        width: 40rpx;
        height: 40rpx;
    }

    .li-wrap .list .list-l .text {
        font-size: 28rpx;
        color: #333;
    }

    .li-wrap .list .arrow {
        width: 10rpx;
        height: 10rpx;
        border-top: 4rpx solid #ccc;
        border-right: 4rpx solid #ccc;
        transform: rotate(45deg);
    }

    .company {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 10rpx 0 50rpx 0;
    }

    .company .c-wrap {
        width: 30%;
        position: relative;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .company .c-wrap .line {
        height: 40rpx;
        width: 100%;
        border-bottom: 2rpx solid #999;
        position: absolute;
        top: 0;
    }

    .company .c-wrap .text {
        background: #fafafa;
        color: #999;
        font-size: 30rpx;
        text-align: center;
        width: 80%;
        z-index: 2;
    }

    .company .tip {
        font-size: 24rpx;
        color: #b3b3b3;
    }

    .contact-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background: none;
        padding: 0 30rpx 0 0;
        height: 90rpx;
        line-height: 90rpx;
        border-bottom: 1rpx solid #f1f1f1;
    }

    .contact-btn::after {
        border: none;
    }

    .contact-btn .list-l {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .contact-btn .list-l .icon {
        margin-right: 20rpx;
        /* background: #f1f1f1; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contact-btn .list-l .icon .img {
        width: 40rpx;
        height: 40rpx;
    }

    .contact-btn .list-l .text {
        font-size: 28rpx;
        color: #333;
    }

    .contact-btn .arrow {
        width: 10rpx;
        height: 10rpx;
        border-top: 4rpx solid #ccc;
        border-right: 4rpx solid #ccc;
        transform: rotate(45deg);
    }
</style>
